<template>
 <!-- 活动入口 -->
  <div class="active-content">
    <rubik-cube-style1 v-if="ruleFormLocal.rubikCubelistStyle == 0"></rubik-cube-style1>
    <rubik-cube-style2 v-if="ruleFormLocal.rubikCubelistStyle == 1"></rubik-cube-style2>
    <option-right v-if="dateFactory.activeBorder">
      <div class="option-wrap">
        <el-form :model="ruleFormLocal" label-width="100px">
          <div class="edit-componet-title">
            魔方
          </div>
          <el-form-item label="魔方样式" prop="styleTypeTitle">
            <el-radio-group v-model="ruleFormLocal.rubikCubelistStyle">
              <el-radio :label="0">样式1</el-radio>
              <el-radio :label="1">样式2</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
    </option-right>
  </div>
</template>

<script>
import RubikCubeStyle1 from './RubikCubeStyle1';
import RubikCubeStyle2 from './RubikCubeStyle2';
export default {
  name: 'RubikCube',
   props: {
    dateFactory: Object,
    index: Number,
    diyData: Array,
  },
  data() {
    return {
       ruleFormLocal:this.dateFactory.ruleForm,
    }
  },
  components: {
    RubikCubeStyle2,
    RubikCubeStyle1,
  },
  computed: {
    
  },
  watch: {
    ruleFormLocal: {
      handler: function (newValue) {
        console.log(newValue, 'newValuenewValuenewValue')
        this.diyData[this.index].ruleForm = newValue
        this.$EventBus.$emit('diyFactory', this.diyData)
      },
      deep: true,
    }
  },
  mounted() {
    // console.log(this.ruleFormLocal.rubikCubelistStyle, 'ruleFormLocalruleFormLocal')
  },
  methods: {

  },
}
</script>

<style lang="less" scoped>
  // 活动入口
  .active-content {
    background: #fff;
    .activity-wrap {

      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 358px;
      margin: 0 auto;
      padding: 5px 0 25px;
      .left-content {
        height: 205px;
        width: 205px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .top {
          height: 93px;
          width: 100%;
          position: relative;
          .bg {
            width: 100%;
            height: 100%;
          }
          .content {
            position: absolute;
            top: 0;
            left: 14px;
            right: 14px;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .h1 {
              font-size: 15px;
              color: #fff;
              font-weight: 700;
            }
            .desc {
              font-size: 11px;
              color: #fff;
            }
            .left-desc {
              margin-top: -23px;
            }
            .right-show {
              display: flex;
              align-items: center;
              justify-content: center;
              img {
                width: 75px;
                height: 70px;
              }
            }
            
          }
        }
        .bottom {
          display: flex;
          align-items: center;
          justify-content: space-between;
          .left {
            width: 100px;
            height: 101px;
            position: relative;
            .bg {
              width: 100%;
              height: 100%;
            }
            .content {
              position: absolute;
              top: 0;
              left: 0;
              height: 100%;
              width: 100%;
              display: flex;
              flex-direction: column;
              justify-content: space-around;
              align-items: center;
              .h1 {
                color: #fff;
                font-size: 15px;
                font-weight: 700;
              }
              .title {
                font-size: 11px;
                color: #fff;
              }
              img {
                width: 53px;
                height: 32px;
              }
            }
          }
          .right {
            width: 100px;
            height: 101px;
            position: relative;
            .bg {
              width: 100%;
              height: 100%;
            }
            .content {
              position: absolute;
              top: 0;
              left: 0;
              height: 100%;
              width: 100%;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              .h1 {
                color: #fff;
                font-size: 15px;
                font-weight: 700;
                justify-content: center;
              }
              .h2 {
                font-size: 11px;
                color: #fff;
              }
              img {
                width: 50px;
                height: 44px;
                margin-top: 8px;
              }
            }
          }
        }
      }
      .right-content {
        width: 145px;
        height: 205px;
        position: relative;
        .bg {
          width: 100%;
          height: 100%;
        }
        .content {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          flex-direction: column;
          justify-content: center;
          .h1 {
            font-size: 15px;
            color: #fff;
            font-weight: 700;
          }
          .h2 {
            font-size: 11px;
            color: #fff;
          }
          .btn {
            width: 89px;
            height: 23px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #fff;
            border-radius: 23px;
            font-size: 11px;
            color: #1456fc;
          }
          img {
            width: 93px;
            height: 88px;
            margin-top: 17px;
            margin-bottom: 11px;
          }
        }
      }
    }
  }
  .option-wrap {
    .el-form  {
      .edit-componet-title {
        margin-bottom: 15px;
        padding-bottom: 7px;
        border-bottom: 1px solid #e5e5e5;
        font-size: 14px;
      }
    }
    

  }

  
</style>